<template>
  <div id="app-container" style="padding:30px;">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="批次名称">
        <el-input v-model="batchQuery.name" placeholder="批次名称"></el-input>
      </el-form-item>
      <el-form-item label="版权名">
        <el-input v-model="batchQuery.copyrightId" placeholder="版权名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-row :gutter="20">
          <el-col :span="7"><el-button type="primary" @click="query()">查询</el-button></el-col>
          <el-col :span="7"><el-button type="primary" @click="reset()">清空</el-button></el-col>
          <el-col :span="7">
            <router-link :to="'/bms/copyright/create'">
              <el-button type="primary">添加</el-button>
            </router-link>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <el-table :data="batchList" border fit highlight-current-row>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (pageNo - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="批次名称" width="80" />
      <el-table-column prop="copyrightId" label="版权名"/>
      <el-table-column prop="startTime" label="授权开始时间" />
      <el-table-column prop="endTime" label="授权结束时间" />
      <el-table-column prop="proportion" label="分成比例" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary"  size="mini" @click="StateBatch">书籍状态</el-button>
          <el-button type="primary" size="mini" @click="deleteBatch(scope.row.id, scope.row.online)">删除</el-button>
          <router-link :to="'/bms/copyright/update/'+scope.row.id">
            <el-button type="primary" size="mini" >修改</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :page-size="pageSize"
      :current-page="pageNo"
      :total="total"
      :pager-count="11"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="query()">
    </el-pagination>
  </div>
</template>
<script>
import batch from '@/api/copyrightin/batch.js'

export default {
  data() { // ## 定义变量和初始值
    return {
      batchList: null, // ## 数据列表
      batchQuery: {}, // ##查询条件封装对象
      total: 0, // ## 总记录数
      pageNo: 1, // ## 页码
      pageSize: 10, // ## 每页显示记录数
      currentTime: '', // ## 当前时间
      firstSort: [],
      secondSort: []
    }
  },
  created() { // ## 在页面渲染之前,一般先调用methods定义的方法
    this.query()
    this.queryFirstSort()
  },
  methods: { // ## 创建具体的方法,调用 batch.js 定义的方法
    query(pageNo = 1) { // 查询
      this.pageNo = pageNo
      // 调用后端接口查询数据
      batch.query(this.pageNo, this.pageSize, this.batchQuery)
        .then(response => {
          // 赋值
          this.batchList = response.data.items
          this.total = response.data.total
          this.currentTime = this.format(new Date(), 'yyyy-MM-dd HH:mm:ss')
        })
    },
    format(date, fmt) { // ## 格式化日期
      let o = {
        'M+': date.getMonth() + 1, // ## 月份
        'd+': date.getDate(), // ## 日
        'H+': date.getHours(), // ## 小时
        'm+': date.getMinutes(), // ## 分
        's+': date.getSeconds(), // ## 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // ## 季度
        'S': date.getMilliseconds() // ## 毫秒
      }
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      for (let k in o)
        if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      return fmt
    },
    reset() { // 清空查询条件内容
      // 清空数据
      this.batchQuery = {}
      // 重新查询
      this.query()
    },
    deleteBatch(id, online) {
      if (online === 1) {
        this.$message({
          type: 'error',
          message: '该书籍已上线不允许删除'
        })
      } else {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          batch.delete(id)
            .then(response => {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.query()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    StateBatch() {
      this.$confirm('上线：10  下线：10  过期：0', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
    },
    queryFirstSort() {
      batch.queryFirstSort()
        .then(response => {
          this.firstSort = response.data.list
        })
    },
    querySecondSort() {
      batch.querySecondSort(this.batchQuery.firstSort == null ? 0 : this.batchQuery.firstSort)
        .then(response => {
          this.secondSort = response.data.list
        })
    }

  }
}
</script>
